<template>
	<view class="box">
		<view class="nav">
			<u-navbar :is-back="true" title="" :border-bottom="false">
				<view class="slot-right">
					<u-search placeholder="请输入商品搜索" v-model="keyword" @custom="search" @search="search"
						:clearabled="true" :animation="true"></u-search>
				</view>
			</u-navbar>
		</view>
		<view class="container_B flc app">
			<view class="left">
				<u-image width="150rpx" height="150rpx" :lazy-load="true" :src="storeInfo.format_logo"
					border-radius="20rpx"></u-image>
			</view>
			<view class="right">
				<view class="name_phone jsbc">
					<view class="name">
						{{storeInfo.business_name}}
					</view>
					<view class="phone" @click="call(storeInfo.phone)">
						<u-icon :name="'/static/icons/lxwm.png'" size="32"></u-icon>
					</view>
				</view>
				<view class="time_status flc">
					<view class="time">
						营业时间：{{storeInfo.business_hours||'无'}}
					</view>
					<view class="status btn ml2">
						<span v-if="storeInfo.bus_state==1">营业中</span>
						<span v-else>暂未营业</span>
					</view>
				</view>
				<view class="address_dw jsbc">
					<view class="address_map flc">
						<u-icon name="map" size="26" color="#dedede"></u-icon>
						<view class="address textO" v-if="storeInfo.region">
							{{storeInfo.region.province+storeInfo.region.city+storeInfo.region.region}}{{storeInfo.detail}}
						</view>
					</view>
					<view class="dw" @click="openDT">
						<u-icon :name="'/static/icons/dhd.png'" size="32"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- tabs -->
		<view class="tabs container_B" v-if="tabList.length>0">
			<u-subsection :list="tabList" v-model="currents" @change="changeTab"></u-subsection>
		</view>
		<!-- content -->
		<view class="contentTab" v-if=" currents==0">
			<view class="tab" v-if="list.length>0">
				<u-tabs :list="list" :is-scroll="list.length>6" v-model="current" @change="change"
					active-color="#fa4f2a" inactive-color="#606266" :bar-style="{color:'#fa4f2a'}"></u-tabs>
			</view>
			<scroll-view scroll-y="true" style="height: calc(100vh - 550rpx);" @scrolltolower='loadmore'>
				<view class="goodsList jsbw" v-if="goodsList">
					<view class="item" v-for="(item,index) in goodsList " :key="index">
						<view class="img">
							<u-image width="345rpx" height="345rpx" :src="item.images_format[0]"
								:lazy-load="true"></u-image>
						</view>
						<view class="info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price cxc">
								￥{{item.min_price||item.price}}元
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
				<u-empty text="没有数据哦~" mode="list" v-if="goodsList.length==0&&status=='nomore'"></u-empty>
			</scroll-view>
		</view>
		<view class="contentTab" v-if="currents==1">
			<scroll-view scroll-y="true" style="height: calc(100vh - 550rpx);" @scrolltolower='loadmore'>
				<view class="comment" v-if="commitList">
					<view class="commentView container_br" v-for="(item,index) in commitList" :key="index">
						<view class="commentUser">
							<u-avatar :src="item.user.avatar_format" size="70"></u-avatar>
							<view class="userInfo">
								<view class="username">
									<text>{{item.user.nickname}}</text>
									<span v-if="item.goods_star==1">特别差</span>
									<span v-if="item.goods_star==2">差</span>
									<span v-if="item.goods_star==3">一般</span>
									<span v-if="item.goods_star==4">好</span>
									<span v-if="item.goods_star==5">非常好</span>
								</view>
								<view class="commentTime">
									<text>{{item.created_at}}</text>
									<u-rate :count="5" v-model="item.goods_star" disabled :size="10"
										active-color="#FFAC0E"></u-rate>
								</view>
							</view>
						</view>
						<view class="commentText">{{item.content}}</view>
						<scroll-view scroll-x="true">
							<view class="commentImage" v-if="item.images_format">
								<view class="imgBox ml2" v-for="(c,i) in item.images_format" :key="i">
									<image class="imageIcon" :src="c" mode="aspectFill"></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<u-empty text="没有数据哦~" mode="list" v-if="commitList.length==0&&status=='nomore'"></u-empty>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
		<view class="contentTab container_br" v-if="currents==2">
			<view class="ablumBox " v-if="album">
				<view class="title fz32 mtb2 c3">
					商家相册
				</view>
				<scroll-view style=" height: 300rpx;" scroll-x="true">
					<view class="imgBox flc">
						<view class="item ml2" v-for="(item,index) in album" :key="index">
							<u-image width="300rpx" height="300rpx" :lazy-load="true" :src="index"></u-image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="intro">
				<view class="title fz32 mtb2 c3">
					商家介绍
				</view>
				<mp-html :content="content" v-if="content"></mp-html>
				<view class="" v-else>
					无
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		closeload,
		toastload,
		callPhone,
		openMapFnc
		
	} from '../../utils/common';
	import {
		getStoreDetail,
		getCateGory,
		getSortList,
		getStoreComment
	} from '../../api/index';

	export default {
		data() {
			return {
				keyword: "",
				storeInfo: "",
				tabList: [{
						name: '商家商品',
					},
					{
						name: '用户评论'
					},
					{
						name: '商家介绍',
					}
				],
				list: [],
				current: 0,
				currents: 0,
				goodsList: [],
				page: 1,
				status: 'loadmore',
				commitList: [],
				content: '<p>我帅</p>',
				address: "",
				album: [],
				storeId: ""
			};
		},
		onLoad(res) {
			let that = this
			this.storeId = res.id
			uni.getLocation({
				success: res => {
					console.log('location success', res)
					that.address = res

				}
			})
			getStoreDetail(res.id, {}).then(res => {
				console.log(res);
				this.storeInfo = res.data
				this.album = res.data.images
				this.content = res.data.content
			})
			getCateGory(res.id, {}).then(res => {
				console.log(res);
				this.list = res.data
				this.init()
			})
		},
		methods: {
			init() {
				this.getGoods()
			},
			search() {

			},
			changeTab(index) {
				console.log(index);
				this.currents = index
				this.status = 'loadmore'
				this.page = 1
				this.loadmore()
			},
			change(index) {
				this.current = index
				this.goodsList = []
				this.page = 1
				this.getGoods()


			},
			call(phone) {
				callPhone(phone)
			},
			openDT() {
				openMapFnc(this.address)
			},
			loadmore() {
				console.log("加载更多", this.status);
				if (this.status == 'loadmore') {
					if (this.currents == 0) {
						this.getGoods()
					}
					if (this.currents == 1) {
						this.getCommit()
					}
				}
			},
			// 获取商品
			getGoods() {
				this.status = 'loading'
				let id = this.list[this.current].id
				getSortList(id, {
					page: this.page
				}).then(res => {
					this.goodsList = res.list
					if (res.page > res.last_page) {
						this.page++
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
					if (res.list.length == 0) {
						this.status = 'nomore'
						return
					}
				})

			},
			// 获取评论
			getCommit() {
				this.status = 'loading'

				getStoreComment(this.storeId, {}).then(res => {
					console.log(res);
					if (res.list.length > 0) {
						res.list.forEach(item => {
							this.commitList.push(item)
						})
					} else {
						this.status = 'nomore'
					}
					if (res.last_page > res.page) {
						this.page++
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
				})



			},

		}
	}
</script>

<style lang="scss" scoped>
	.right {
		height: 150rpx;

		.name_phone {
			font-size: 32rpx;
			color: #333333;
		}

		.time_status {
			.time {
				font-size: 24rpx;
				color: #333333;
			}

			.status {
				width: 90rpx;
				height: 36rpx;
				background: #63C76A;
				border-radius: 18rpx;
				line-height: 36rpx;
				font-size: 20rpx;
			}
		}

		.address_dw {
			.address {
				width: 460rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.goodsList {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;

		.item {
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;

			.info {
				width: 345rpx;
				box-sizing: border-box;
				padding: 20rpx 10rpx;
			}
		}
	}

	.commentView {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		padding: 20rpx 0px;
	}

	.commentUser {
		display: flex;
		flex-direction: row;
	}

	.userInfo {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.username {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}

	.commentTime {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 20rpx;
		color: #999;
	}

	.commentText {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 20rpx;
	}

	.commentImage {
		display: flex;
		margin-top: 20rpx;
	}

	.imageIcon {
		width: 216rpx;
		height: 145rpx;
		margin-right: 20rpx;
	}
</style>